<template>
  <div class="tpl-container">
    <div class="mb20 condition-container">
      <div class="condition">
        <span class="color_494949 ft12 pr5">彩屏版本号：</span>
        <ElInput
          v-model="VersionNo"
          class="w164 mr14"
          placeholder="请输入彩屏版本号"
        />
      </div>
      <div class="condition">
        <span class="color_494949 ft12 pr5">升级类型：</span>
        <el-select v-model="VerType" class="m-2" placeholder="Select">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="condition">
        <span class="color_494949 ft12 pr5">显示模式：</span>
        <el-select v-model="VersionName" class="m-2" placeholder="Select">
          <el-option
            v-for="item in modes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="condition">
        <ElButton class="settingBtn" type="primary" @click="search">
          查询
        </ElButton>
        <ElButton
          v-if="MenuAuth('add')"
          class="settingBtn"
          type="primary"
          @click="addFn"
        >
          新增
        </ElButton>
      </div>
    </div>
    <div class="table">
      <ElTable v-loading="loading" :border="true" :data="tableData">
        <ElTableColumn label="升级类型">
          <template #default="{ row }">
            <div>
              {{ row.VerType == 0 ? '程序升级' : '固件升级' }}
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="版本号" prop="VersionNo" width="auto" />
        <ElTableColumn label="显示模式">
          <template #default="{ row }">
            <div>
              {{ row.VersionName == 0 ? '横屏' : '竖屏' }}
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="程序路径" prop="VersionUrl" width="auto" />
        <ElTableColumn label="版本描述" prop="Remark" width="auto" />
        <ElTableColumn label="状态">
          <template #default="{ row }">
            <div>
              {{ row.Status == 0 ? '禁止' : '正常' }}
            </div>
          </template>
        </ElTableColumn>
        <!-- <ElTableColumn label="创建时间" prop="ESLWidth" width="auto" />
        <ElTableColumn label="更新时间" prop="ESLWidth" width="auto" /> -->
        <ElTableColumn label="操作" width="200">
          <template #default="{ row }">
            <ElButton
              v-if="MenuAuth('edit')"
              link
              type="primary"
              @click="editFn(row)"
            >
              修改
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <div v-if="total > 0" class="pagination">
        <ElPagination
          background
          :current-page="searchInfo.pageNo"
          :layout="layout"
          :page-size="searchInfo.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <VersionDialog
      :data="rowData"
      :visible="dialogVisible"
      @close="handleClose"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { MenuAuth } from '~/src/utils/permission'
  import { GetCsVersionPageData, delcsver } from '@/api/mupro'
  import router from '@/router'
  import VersionDialog from './components/versionDialog.vue'
  import { useEleStore } from '@/store/modules/coms'
  const VersionNo = ref('')
  const VerType: any = ref('')
  const types: any = ref([
    {
      label: '默认类型',
      value: '',
    },
    {
      label: '程序升级包',
      value: '0',
    },
    {
      label: '固件升级包',
      value: '1',
    },
  ])
  const VersionName: any = ref('')
  const modes: any = ref([
    {
      label: '默认类型',
      value: '',
    },
    {
      label: '横屏',
      value: '0',
    },
    {
      label: '竖屏',
      value: '2',
    },
  ])
  const searchInfo = reactive({
    pageNo: 1,
    pageSize: 20,
    tableName: '',
    sort: '',
    order: '',
    wheres: `[{"name":"VersionNo","value":${VersionNo.value},"displayType":"like"}, {"name":"VerType","value":${VerType.value},"displayType":"like"}, {"name":"VersionName","value":${VersionName.value},"displayType":"like"}]`,
    export: false,
    value: '',
  })
  const loading = ref(false)
  const { clearWidgets, clearEditorData } = useEleStore()

  const layout = ref('total, sizes, prev, pager, next, jumper')
  const tableData = ref([])
  const total = ref(0)
  // 获取表格数据
  const gettableData = async () => {
    loading.value = true
    const { data } = await GetCsVersionPageData(searchInfo)
    loading.value = false
    // console.log(data)
    tableData.value = data?.rows || []
    total.value = data?.total || 0
  }
  gettableData()
  //分页条数切换
  const handleSizeChange = (val: any) => {
    searchInfo.pageSize = val
    gettableData()
  }
  //分页切换
  const handleCurrentChange = (val: any) => {
    searchInfo.pageNo = val
    gettableData()
  }

  const search = () => {
    searchInfo.pageNo = 1
    if (
      VersionNo.value.trim() !== '' ||
      VerType.value.trim() !== '' ||
      VersionName.value.trim() !== ''
    ) {
      const arr = []
      VersionNo.value.trim() !== '' &&
        arr.push({
          name: 'VersionNo',
          value: VersionNo.value,
          displayType: 'like',
        })
      VerType.value.trim() !== '' &&
        arr.push({ name: 'VerType', value: VerType.value, displayType: 'like' })
      VersionName.value.trim() !== '' &&
        arr.push({
          name: 'VersionName',
          value: VersionName.value,
          displayType: 'like',
        })
      searchInfo.wheres = JSON.stringify(arr)
    } else {
      searchInfo.wheres = `[{"name":"VersionNo","value": '',"displayType":"like"}, {"name":"VerType","value": '',"displayType":"like"}, {"name":"VersionName","value": '',"displayType":"like"}]`
    }
    gettableData()
  }
  const $baseConfirm = inject('$baseConfirm') as any
  const deleteFn = async (row: any) => {
    $baseConfirm('你确定要删除当前项吗', null, async () => {
      await delcsver({
        id: row.ID,
      })
      gettableData()
    })
  }
  // 编辑 新增
  const dialogVisible = ref(false)
  const rowData: any = ref({})
  const editFn = (row: any) => {
    rowData.value = row
    dialogVisible.value = true
  }
  const addFn = async () => {
    rowData.value = {}
    dialogVisible.value = true
  }
  const handleClose = () => {
    dialogVisible.value = false
  }
  const handleConfirm = (result: any) => {
    dialogVisible.value = false
    gettableData()
  }
</script>

<style lang="scss" scoped>
  .tpl-container {
    .color_494949 {
      color: #494949;
    }

    .noData {
      text-align: center;
      font-size: 16px;
      color: gray;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }

    .img-container {
      display: flex;
      // justify-content: center;

      .img {
        width: 100px;
      }
    }

    .condition-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .condition {
        margin-right: 14px;
        margin-bottom: 10px;
      }
    }
  }
  .el-table {
    & ::v-deep th.el-table__cell,
    ::v-deep td.el-table__cell {
      // 设置position 使得 子元素不与其产生新的层叠关系
      position: static;
    }
  }
</style>
